<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XX酒店后台管理系统 客房管理</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../iconfont/amend、delete、add、search/iconfont.css">
    <link rel="" href="../bootstrap-3.4.1/fonts/glyphicons-halflings-regular.eot">
    <script src="../jQuery/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="../JavaScript/dataSaveAndGet.js"></script>
    <script src="../JavaScript/initializationData.js"></script>
    <link rel="stylesheet" href="../css/zy/guestRoom.css">
    <link rel="stylesheet" href="../css/wgl/crm.css">    
</head>

<body class="clear">
  <header>
    <p>XX酒店后台管理系统</p>
      <div class="portrait clear">
          <!-- 头像 -->
              <div>
                  <img src="../images/老板.webp" alt="">
              </div>
              <div id="quit">
                  <p>工号:<span class="jobId"></span> &nbsp;欢迎你!
                  </p>
                  <button>退出<span class="iconfont icon-tuichu" ></span></button>
              </div>
      </div>
</header>
    <!-- 主导航 -->
    <nav class="navbar navbar-default" id="mianNav">
      <div class="container-fluid">
          <!-- 主导航选项 -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                  <li class=""><a href="./guestRoom.html">客房管理</a></li>
                  <li class=""><a href="./reserve.html">预定管理</a></li>
                  <li class="mianActive"><a href="./crm.html">客户管理</a></li>
                  <li class=""><a href="./orderForm.html">订单管理</a></li>
                  <li class=""><a href="./finance.html">财务管理</a></li>
                  <li class=""><a href="./staffManagement.html">员工管理</a></li>
                  <li class=""><a href="./personinMess.html">个人信息</a></li>
                  <li class=""><a href="./gonggao.html">公告</a></li>
              </ul>
          </div>
      </div>
  </nav>
        
    <main>
        <!-- 二级导航条 -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar">1</span>
                        <span class="icon-bar">2</span>
                        <span class="icon-bar">3</span>
                    </button>
                    <a class="navbar-brand" href="#">客户管理</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li id="tankuang" class="new_client"><a href="#">新增客户信息</a></li> 
                    </ul>
                    <form class="navbar-form navbar-left">
                        <select name="" id="typeOption" class="form-control">

                            <option value="option1">姓名</option>
                            <option value="option2">联系方式</option>
                            <option value="option3">身份证号</option>
                        </select>
                        <div class="form-group">
                            <input type="text" class="form-control" id="OptionType" placeholder="请输入姓名">
                        </div>
                        <button class="btn btn-default" id="djsearch">搜索</button>
                    </form>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <table class="table table-striped">
            <thead>
                <tr>
                    
                    <th>姓名</th>
                    <th>性别</th>
                    <th>联系方式</th>
                    <th>登记身份证号</th>
                    <th>房间号</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="table_body">
              
            </tbody>
        </table>
       
        <nav aria-label="..." class="claer everyPage">
          <ul class="pagination" id="page">

          </ul>
      </nav>
    </main>

    <footer>
        <!-- 新增弹框 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                 <div class="modal-content">
                      <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                           aria-hidden="true">&times;</span></button>
                           <h4 class="modal-title" id="myModalLabel">新增客户信息</h4>
                      </div>
                      <div class="modal-body">
                        输入客户姓名： <input type="text" class="message1">
                      </div>
                      <div class="modal-body">
                        输入客户姓别： <input type="text" class="message2">
                      </div>
                      <div class="modal-body">
                        客户联系方式： <input type="text" class="message3">
                      </div>
                      <div class="modal-body">
                        客户身份证号： <input type="text" class="message4">
                      </div>
                      <div class="modal-body">
                        客户房间信息： <input type="text" class="message5">
                      </div>
                      <div class="modal-body">
                        客户备注信息： <input type="text" class="message6">
                      </div>
                      <div class="modal-footer" id="whether_bu">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                           <button type="button" class="btn btn-default" data-dismiss="modal" id="affirm">确认</button>
                      </div> 
                 </div>
            </div>
       </div>
     <!-- 修改弹框 -->
     <div id="mo_box">
        <h4>修改客户信息</h4>
        <div id="mo_box2">
            客户姓名：<input type="text" class="messagea"><br>
            客户姓别：<input type="text" class="messageb"><br>
            客户联系方式：<input type="text" class="messagec"><br>
            客户身份证号：<input type="text" class="messaged"><br>
            客户房间信息：<input type="text" class="messagee"><br>
            客户备注信息：<input type="text" class="messagef">
        </div>
        <button class="affirm2">确认</button>
        <button class="cancel">取消</button>
     </div>
     <!-- 确认删除 -->
     <div class="modal fade" id="delhint" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">删除提示</h4>
            </div>
            <div class="modal-body">
                是否确认删除
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-default" data-dismiss="modal" id="confirm">确认删除</button>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <script src="../JavaScript/wgl/crm.js"></script>
</body>

</html>